<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>Document</title>
		<link rel="stylesheet" href="../layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../css/details-infor.css">
	</head>
	<style>
		.qqFace{
			width: 100%;
			position:absolute;
			display:none;
			z-index:1000;
			left: 0;
			bottom: 50px;
			background: #fff;
			left: -0.1%;
		}
	</style>
	<body>
		<header>
			<a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
			<div class="center title">详情信息</div>
		</header>
		<div class="content">
			<div class="flex">
				<div><img src="../img/logo.png" width="50px"></div>
				<div>
					<p class="username">小静静</p>
					<p class="girl flex">
						<img src="../img/female-s.png" height="7px"> 23
					</p>
				</div>
				<div class="attention">关注</div>
			</div>
			<p class="wz">有在南山的朋友吗？</p>
			<div class="flex pic">
				<img src="../img/logo.png">
			</div>
			<div class="flex xs-r">
				<p>0.1km</p>
				<img src="../img/break.png" height="5px" class="break">
				<p>5分钟前</p>
				<img src="../img/break.png" height="5px" class="break">
				<p>1080阅读</p>
			</div>
			<div class="flex xs-r">
				<div class="addlike">
					<img src="../img/like-n.png" height="15px">
					<span>15</span>
				</div>
				<div>
					<img src="../img/comment.png" height="15px">
					<span>6</span>
				</div>
				<div class="chat">
					<img src="../img/chat.png" height="15px">
				</div>
			</div>
		</div>
		<div class="hot">
			<p>热门评论</p>
			<div class="xs">
				<div class="flex">
					<div>
						<img src="../img/logo.png" width="50px">
					</div>
					<div class="hot-r">
						<div class="flex">
							<p class="username">美游新号</p>
							<p class="boy flex">
								<img src="../img/female-s.png" height="7px"> 23
							</p>
						</div>
						<p class="wz flex">听说会弹吉他的女孩子都很美
							<span class="box">
								<img src="../img/like-n.png" class="like">
								<img src="../img/like-s.png">
							</span>
						</p>
						<div class="flex xs-r">
							<p>0.1km</p>
							<img src="../img/break.png" height="5px" class="break">
							<p>5分钟前</p>
						</div>
					</div>
				</div>
			</div>
			<div class="xs">
				<div class="flex">
					<div>
						<img src="../img/logo.png" width="50px">
					</div>
					<div class="hot-r">
						<div class="flex">
							<p class="username">美游新号</p>
							<p class="boy flex">
								<img src="../img/female-s.png" height="7px"> 23
							</p>
						</div>
						<p class="wz flex">听说会弹吉他的女孩子都很美
							<span class="box">
								<img src="../img/like-n.png" class="like">
								<img src="../img/like-s.png">
							</span>
						</p>
						<div class="flex xs-r">
							<p>0.1km</p>
							<img src="../img/break.png" height="5px" class="break">
							<p>5分钟前</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="release">
			<input type="text" name="" id="saytext" placeholder="发布评论">
			<img src="../img/smile.png" class="emotion">
		</div>
		<input style="display: block;margin: 0 auto;" type="button" value="提交" id="btn">
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/jqqqface.js"></script>
		<script src="../js/jquery.qqFace.js"></script>
		<script src="../layui/layui.all.js"></script>
		<script src="../js/details-infor.js"></script>
	</body>
</html>
<script>
	$(document).on('click','#btn',function () {
		var val=$('#saytext').val();
		var div='<div class="xs">\n' +
				'<div class="flex">\n' +
				'<div>\n' +
				'<img src="../img/logo.png" width="50px">\n' +
				'</div>\n' +
				'<div class="hot-r">\n' +
				'<div class="flex">\n' +
				'<p class="username">美游新号</p>\n' +
				'<p class="boy flex">\n' +
				'<img src="../img/female-s.png" height="7px"> 23\n' +
				'</p>\n' +
				'</div>\n' +
				'<p class="wz flex">'+replace_em(val) +
				'<span class="box">\n' +
				'<img src="../img/like-n.png" class="like">\n' +
				'<img src="../img/like-s.png">\n' +
				'</span>\n' +
				'</p>\n' +
				'<div class="flex xs-r">\n' +
				'<p>0.1km</p>\n' +
				'<img src="../img/break.png" height="5px" class="break">\n' +
				'<p>5分钟前</p>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>\n' +
				'</div>';
		if (val==''){
			layer.msg('内容不能为空',{icon:5,time:800})
			return false;
		}else {
			$('#saytext').val('');
			$('.hot').append(div);
		}


	});
	$(function () {
		$('.comment_size').text($('.xs').length);
		console.log($('.xs').length);
	});

	$(function() {
		$('.emotion').qqFace({
			id: 'facebox',
			assign: 'saytext',
			path: '../arclist/' //表情存放的路径
		});

	});
	function replace_em(value) {
		value = value.replace(/\</g, '&lt;');
		value = value.replace(/\>/g, '&gt;');
		value = value.replace(/\n/g, '<br/>');
		value = value.replace(/\[em_([0-9]*)\]/g, '<img src="../arclist/$1.gif" border="0" />');
		return value;
	}

</script>
